<template>
  <!-- 
  layer 上个页面接收到的参数，直接传给这个组件
 -->
  <Layer :layer="layer"
         @confirm="submit"
         ref="layerDom">
    <el-form :model="form"
             :rules="rules"
             ref="ruleForm"
             label-width="120px"
             style="margin-right:30px;">
      <el-form-item label="任务名称"
                    prop="task_name">
        <el-input v-model="form.task_name"
                  placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item required
                    label="主页链接"
                    prop="url">
        <el-input v-model="form.url"
                  placeholder="请输入主页链接"></el-input>
      </el-form-item>

      <el-form-item label="备注信息">
        <el-input type="textarea"
                  v-model="form.task_msg"
                  placeholder="请输入备注信息"></el-input>
      </el-form-item>
    </el-form>
  </Layer>
</template>

<script lang="ts">
import request from "@/utils/system/request.ts";
import type { LayerType } from "@/components/layer/index.vue";
import type { Ref } from "vue";
import type { ElFormItemContext } from "element-plus/lib/el-form/src/token";
import { defineComponent, ref } from "vue";
import { addTask, editTask } from "@/api/yuange/dy.ts";
//引入之前定义好数据，用在选择框中而已
// import { selectData, radioData } from "./enum";
import Layer from "@/components/layer/index.vue";
export default defineComponent({
  components: {
    Layer,
  },
  props: {
    layer: {
      type: Object,
      default: () => {
        return {
          show: false,
          title: "添加任务",
          showButton: true,
        };
      },
    },
  },
  mounted() {
    //某些参数的值直接在组件里面设定就可以了
    this.layer.width = "50%";
    this.layer.showButton = true;
  },
  setup(props, ctx) {
    const ruleForm: Ref<ElFormItemContext | null> = ref(null);
    const layerDom: Ref<LayerType | null> = ref(null);
    //定义form参数
    let form = ref({
      task_name: "",
      task_type: "index",
      task_msg: "",
      plateform_type: "dy",
    });
    //from 规则校验
    const rules = {
      task_name: [
        { required: true, message: "请输入任务名称", trigger: "blur" },
      ],
      url: [{ required: true, message: "请输入主页链接", trigger: "blur" }],
    };

    return {
      //自定义参数
      //setup返回参数
      form,
      rules,
      layerDom,
      ruleForm,
      // 页面import 引入的数据
      // selectData,
      // radioData,
    };
  },
  methods: {
    submit() {
      //避免空指针异常，判断一下ruleform
      if (this.ruleForm) {
        this.ruleForm.validate((valid) => {
          if (valid) {
            // 验证通过
            let params = this.form;
            // if (this.layer.row) {
            // this.updateForm(params);
            // } else {
            this.addForm(params);
            // }
          } else {
            console.log("不通过");
            return false;
          }
        });
      }
    },
    //jqh666999
    //新增提交事件
    addForm(params: object) {
      console.log(1111);
      if (params.url.length < 10) {
        this.$message({
          type: "error",
          message: "链接长度不正确",
        });
        return;
      }
      console.log(222222);
      addTask(params).then((res) => {
        console.log(res, "新增任务");
        this.$message({
          type: "success",
          message: "新增成功",
        });
        this.$emit("getTableData", true);
        this.layerDom && this.layerDom.close();
      });
    },

    // 编辑提交事件
    // updateForm(params: object) {
    //   editTask(params).then((res) => {
    //     this.$message({
    //       type: "success",
    //       message: "编辑成功",
    //     });
    //     this.$emit("getTableData", false);
    //     this.layerDom && this.layerDom.close();
    //   });
    // },
  },
});
</script>

<style lang="scss" scoped>
</style>